// import React, { Component } from 'react'
import './index.css'
import { message } from 'antd'
import Item from './Item/Item'
import Table from './Table/Table'
// 类式组件
// export default class ShopCar extends Component {
//   state = {
//     courseList: [
//       {
//         id: 1,
//         title: 'Python开发',
//         content: '精通Python学习指南',
//         price: 234,
//       },
//       {
//         id: 2,
//         title: 'Java实战开发',
//         content: '精通Java学习指南',
//         price: 674,
//       },
//       {
//         id: 3,
//         title: 'H5实战开发',
//         content: '精通H5学习指南',
//         price: 345,
//       },
//       {
//         id: 4,
//         title: '测试框架开发',
//         content: '精通测试框架学习',
//         price: 123,
//       },
//     ],
//     listData: [],
//   }
//   componentDidMount() {}
//   render() {
//     let { courseList, listData } = this.state
//     return (
//       <div>
//         <Item courseList={courseList} add={this.add}></Item>
//         <Table
//           listData={listData}
//           changeNum={this.changeNum}
//           deleteItem={this.deleteItem}
//           totalPrice={this.totalPrice}
//         ></Table>
//       </div>
//     )
//   }
//   // 增加
//   add = (item) => {
//     let { listData } = this.state

//     // 判断是否已经添加了
//     let isPushIn = listData.some((v) => v.id === item.id)
//     if (isPushIn) return message.error('你已经加入购物车了')

//     listData.push({ ...item, num: 1 })
//     this.setState({ listData }, () => {
//       message.success('添加购物车了')
//     })
//   }
//   // 改变数量
//   changeNum = (type, id) => {
//     let listData = this.state.listData.map((v) => {
//       if (v.id === id) {
//         if (type === '-') {
//           v.num--
//         } else {
//           v.num++
//         }
//       }
//       return v
//     })
//     this.setState({ listData })
//   }
//   // 删除
//   deleteItem = (id) => {
//     let listData = this.state.listData.filter((v) => v.id !== id)
//     this.setState({ listData })
//   }
//   // 总价
//   get totalPrice() {
//     return this.state.listData.reduce((pre, v) => pre + v.num * v.price, 0)
//   }
// }

import React, { useState, useMemo } from 'react'
// 函数组件
export default function ShopCar() {
  let initialState = [
    {
      id: 1,
      title: 'Python开发',
      content: '精通Python学习指南',
      price: 234,
    },
    {
      id: 2,
      title: 'Java实战开发',
      content: '精通Java学习指南',
      price: 674,
    },
    {
      id: 3,
      title: 'H5实战开发',
      content: '精通H5学习指南',
      price: 345,
    },
    {
      id: 4,
      title: '测试框架开发',
      content: '精通测试框架学习',
      price: 123,
    },
  ]
  const [courseList, setcourseList] = useState(initialState)
  let [listData, setlistData] = useState([])

  // 增加
  const add = (item) => {
    // 判断是否已经添加了
    let isPushIn = listData.some((v) => v.id === item.id)
    if (isPushIn) return message.error('你已经加入购物车了')

    listData.push({ ...item, num: 1 })
    setlistData(() => [...listData])
    message.success('添加购物车了')
  }
  // 改变数量
  const changeNum = (type, id) => {
    listData = listData.map((v) => {
      if (v.id === id) {
        if (type === '-') {
          v.num--
        } else {
          v.num++
        }
      }
      return v
    })
    setlistData(() => [...listData])
  }
  // 删除
  const deleteItem = (id) => {
    listData = listData.filter((v) => v.id !== id)
    setlistData(() => [...listData])
  }
  // 总价
  const totalPrice = useMemo(() => {
    return listData.reduce((pre, v) => pre + v.num * v.price, 0)
  }, [listData])

  return (
    <div>
      <Item courseList={courseList} add={add}></Item>
      <Table
        listData={listData}
        changeNum={changeNum}
        deleteItem={deleteItem}
        totalPrice={totalPrice}
      ></Table>
    </div>
  )
}
